import { Fragment } from '@/components/Fragment'; 
import { Menu, MenuItem, View } from '@aws-amplify/ui-react';

import { MenuDemo } from './demo';
import {
  BasicExample,
  ControlledExample,
  MenuAlignExample,
  MenuExample,
  MenuItemsExample,
  SizeExample,
  StylePropsExample,
  MenuThemeExample,
} from './examples/';

import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

## Demo

<MenuDemo />

## Usage

Import the `Menu` and `MenuItem` components. Note that the Menu component is rendered in a React Portal, so you can set the Menu button's width from its outer container.

<Example>
  <BasicExample />
  <ExampleCode>
```tsx file=./examples/basicExample.tsx

````
  </ExampleCode>
</Example>

### Menu items

Use the `MenuItem` component to configure Menu options. The example below demonstrates how to add interactivity to the `MenuItem`'s via the `onClick` handler, as well as how to use the `Divider` component and `isDisabled` prop.

<Example>
  <MenuItemsExample />
  <ExampleCode>
```tsx file=./examples/menuItemsExample.tsx

````

  </ExampleCode>
</Example>

### Customize Menu button

The default Menu button can be customized by importing the `MenuButton` component and passing it to the `Menu`'s `trigger` prop. `MenuButton` can take all the same props as [Button](./button).

<Example>
  <MenuExample />
  <ExampleCode>
```tsx file=./examples/menuExample.tsx

````

  </ExampleCode>
</Example>

### Menu alignment

To control the alignment of the Menu with the Menu button, use the `menuAlign` prop. Available options are `start` (default), `center`, and `end`.

<Example>
  <MenuAlignExample />
  <ExampleCode>
```tsx file=./examples/menuAlignExample.tsx

````

  </ExampleCode>
</Example>

### Size

Control the size of the Menu button and items using the `size` prop. Available options are `small`, none (default), and `large`.

<Example>
  <SizeExample />
  <ExampleCode>
```tsx file=./examples/sizeExample.tsx

````

  </ExampleCode>
</Example>

### Controlled Menu

Create a controlled `Menu` using the `isOpen` and `onOpenChange` props.

<Example>
  <ControlledExample />
  <ExampleCode>
```tsx file=./examples/controlledExample.tsx

````

  </ExampleCode>
</Example>

## CSS Styling

<ThemeExample component="Menu">
  <Example>
    <MenuThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/MenuThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Menu" />

### Global styling

To override styling on all Menus, you can set the Amplify CSS variables with the built-in classes.

```css
/* styles.css */
.amplify-menu-content {
  --amplify-components-button-color: var(--amplify-colors-brand-secondary-90);
}
.amplify-menu-trigger {
  --amplify-components-button-border-color: var(
    --amplify-colors-brand-secondary-90
  );
  --amplify-components-button-color: var(--amplify-colors-brand-secondary-90);
}
```

```jsx
import { Menu, MenuItem } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import './styles.css';

export const GlobalStylingExample = () => (
  <Menu>
    <MenuItem>Download</MenuItem>
    <MenuItem>Create a Copy</MenuItem>
    <MenuItem>Mark as Draft</MenuItem>
  </Menu>
);
```

<Example>
  <View width="4rem">
    <Menu
      className="global-styling-menu"
      triggerClassName="global-styling-menu-trigger"
    >
      <MenuItem>Download</MenuItem>
      <MenuItem>Create a Copy</MenuItem>
      <MenuItem>Mark as Draft</MenuItem>
    </Menu>
  </View>
</Example>

### Local styling

To override styling on a specific Menu, you can use (in order of increasing specificity): a class selector, data attributes, or style props.

_Using a class selector:_

Note: The `classname` prop is applied to the Menu dropdown content. Use the `triggerClassName` prop to apply a class to the menu trigger button.

```css
/* styles.css */
.my-menu-trigger.amplify-menu-trigger {
  border-color: var(--amplify-colors-brand-secondary-90);
  color: var(--amplify-colors-brand-secondary-90);
}
.my-menu-content .amplify-menu-content__item {
  color: var(--amplify-colors-brand-secondary-90);
}
.my-menu-content .amplify-menu-content__item:hover {
  background-color: var(--amplify-colors-brand-secondary-90);
}
```

```jsx
import { Menu, MenuItem } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import './styles.css';

export const ClassNameExample = () => (
  <Menu className="my-menu-content" triggerClassName="my-menu-trigger">
    <MenuItem>Download</MenuItem>
    <MenuItem>Create a Copy</MenuItem>
    <MenuItem>Mark as Draft</MenuItem>
  </Menu>
);
```

<Example>
  <View width="4rem">
    <Menu className="my-menu-content" triggerClassName="my-menu-trigger">
      <MenuItem>Download</MenuItem>
      <MenuItem>Create a Copy</MenuItem>
      <MenuItem>Mark as Draft</MenuItem>
    </Menu>
  </View>
</Example>

_Using data attributes:_

```css
/* styles.css */
.amplify-menu-content__item[data-size='large'] {
  font-size: var(--amplify-font-sizes-xxxxl);
}
```

```jsx
import { Menu, MenuItem } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import './styles.css';

export const DataAttributesExample = () => (
  <Menu size="large">
    <MenuItem>Download</MenuItem>
    <MenuItem>Create a Copy</MenuItem>
    <MenuItem>Mark as Draft</MenuItem>
  </Menu>
);
```

<Example>
  <View width="4rem">
    <Menu size="large" className="custom-font-size">
      <MenuItem>Download</MenuItem>
      <MenuItem>Create a Copy</MenuItem>
      <MenuItem>Mark as Draft</MenuItem>
    </Menu>
  </View>
</Example>

_Using style props:_

<Example>
  <StylePropsExample />
  <ExampleCode>
```tsx file=./examples/stylePropsExample.tsx

```
  </ExampleCode>
</Example>